<template>
  <div >
    用户端的文章界面<br/><br/>
    <!-- 条件查询表单 -->
    <div>
      <el-form :inline="true" :model="openotice" class="demo-form-inline" >
        
        <!-- 查询条件 -->
        <el-form-item label="文章标题">
          <el-input v-model="openotice.ntitle" placeholder="请输入文章标题" widht="20px"></el-input>
        </el-form-item>
        <!-- 查询按钮 -->
        <el-form-item >
          <el-button type="primary" @click="getAllOpenoticeButton">查询</el-button>
          <el-button type="primary"  @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据展示 -->
    <div class="table-container">
        <el-table :data="pageBean.beanList" style="width: 40%" >
            <el-table-column prop="ntitle" label="文章标题" width="200">
                <template v-slot="scope">  
                    <el-link @click="goToArticleDetail(scope.row)">{{ scope.row.ntitle }}</el-link>  
                </template> 
            </el-table-column>
            <el-table-column prop="topic" label="话题专栏" width="120" />
            <el-table-column prop="createdate" label="创建时间" />
            <!-- <el-table-column label="操作" >
            <template #default="scope">
                <el-button size="mini" type="text" icon="el-icon-edit" @click="getData(scope.$index,scope.row)">查看数据</el-button>
            </template>
            </el-table-column> -->
        </el-table>
    </div>

    <!-- 分页控件 -->
    <div class="table-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[3, 5,10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageBean.totalRecord">
      </el-pagination>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      sample: {},
      pageBean: [],
      pageIndex: 1,
      pageSize: 10,
      openotice: {},
    };
  },
  mounted() {
    this.getAllOpenotice();
  },
  
  methods: {
    //跳转到文章页面，同时阅读量加1
    goToArticleDetail(row) {  
        this.$router.push('/opeNoticeDetail/'+row.nid); 
        this.$axios.get("notice/addViewCountById/"+ row.nid).then((resp) => {
              if (resp.data.code == 200) {
                this.$message({
                type: "success",
                message: "阅读量加1!",
            });
            }else{
                console.error('文章阅读失败:', error); 
            }
        });
    },


    //条件查询操作
    getAllOpenoticeButton() {
      this.pageIndex = 1;
      this.pageSize = 10;
      this.getAllOpenotice();
    },

    //重置按钮
    reset() {
      this.openotice = {};
      this.getAllOpenotice();
    },      

    //查询已发布的文章
    getAllOpenotice() {
      this.$axios
        .post(
          "notice/nstate/" + this.pageIndex + "/" + this.pageSize,this.openotice)
        .then((resp) => {
          if(resp.data.code==200){
            this.pageBean = resp.data.data;
          }
        });
    },

    //每页显示几条数据
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAllOpenotice();
    },

    //显示第几页
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getAllOpenotice();
    },
  },
};
</script>

<style>
.table-container {
  display: flex;
  justify-content: center;
}
</style>